import React, { PureComponent } from 'react'
import "./index.css"

export default class index extends PureComponent {
    state = {
        carName:'奔驰c63'
    }

    changeCar = ()=>{
        this.setState({
            carName:'迈巴赫'
        })
    }

    render() {
        // 如果组件继承Component组件，则不管有没有发生改变，都会重复调用render方法进行渲染
        // 修改继承 PureComponent，则只有在state真正发生变化时才会触发render
        console.log('更新触发');
        return (
            <div className='parent'>
                <h4>我的车是：{this.state.carName}</h4>
                <button onClick={this.changeCar}>点击换车</button>
                <B />
            </div>
        )
    }
}
class B extends PureComponent{
    render(){
        console.log('子组件render');
        return(
            <div className='child'>
                我是子组件
            </div>
        )
    }
}
